<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二维标签加载_基础</title>

    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./data/data.js"></script>
  </head>
  <body>
    <div id="player"></div>

    <div class="btn-list">
      <div onclick="add()" class="btn">创建线图层</div>
      <div onclick="add2()" class="btn">创建导航线路</div>
      <div onclick="clearLayer()" class="btn">清除图层</div>
    </div>

    <script type="text/javascript">
      /**
       * 创建文字点位
       */
      const add = () => {
        const polylineList = []
        const IDList = []

        metroPolyline.forEach(item => {
          const id = 'p1_' + item.name
          IDList.push(id)
          let p = {
            id: 'p1_' + item.name, //折线唯一标识id
            coordinates: item.coordinates, //构成折线的坐标点数组
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: [250 / 255, 170 / 255, 66 / 255, 0.5], //折线颜色
            thickness: 15, //折线宽度
            intensity: 2, //亮度
            flowRate: 1, //流速
            shape: 0, //折线类型 0：直线， 1：曲线
            depthTest: true, //是否做深度检测 开启后会被地形高度遮挡
            style: 4, //折线样式 参考样式枚举：PolylineStyle
            tiling: 0 //材质贴图平铺比例
          }
          polylineList.push(p)

          let p2 = {
            id: 'p2_' + item.name, //折线唯一标识id
            coordinates: item.coordinates.map(c => [c[0], c[1], c[2] + 0.1]), //构成折线的坐标点数组
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: [250 / 255, 170 / 255, 66 / 255], //折线颜色
            thickness: 20, //折线宽度
            intensity: 200, //亮度
            flowRate: 0.4, //流速
            shape: 0, //折线类型 0：直线， 1：曲线
            depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
            style: 3, //折线样式 参考样式枚举：PolylineStyle
            tiling: 0.5 //材质贴图平铺比例
          }

          polylineList.push(p2)
        })

        // 添加dts marker
        fdapi.polyline.add(polylineList)
        fdapi.polyline.focus(polylineList)
      }

      const add2 = () => {
        const coordinatesObj = {
          green: [
            [8110.29203125, 4803.2403125, 2.99900390625],
            [8094.05484375, 4751.673671875, 2.99904296875],
            [8066.745859375, 4685.803671875, 3.0140625],
            [8028.138828125, 4602.00078125, 2.9990234375],
            [8016.237109375, 4594.498359375, 2.99904296875],
            [8001.831953125, 4597.159921875, 2.9990234375],
            [7981.374609375001, 4610.61921875, 2.9990234375]
          ],
          yellow: [
            [7981.374609375001, 4610.61921875, 2.9990234375],
            [7942.0909375, 4652.423984375, 2.999033203125],
            [7908.93234375, 4695.17, 2.999052734375],
            [7883.74890625, 4728.865625, 2.9990234375],
            [7867.13125, 4753.113046875, 2.9990136718750002],
            [7844.434218750001, 4779.85453125, 2.99900390625],
            [7814.95015625, 4804.3989843750005, 2.9990234375],
            [7789.27390625, 4825.63421875, 2.999033203125]
          ],
          red: [
            [7789.27390625, 4825.63421875, 2.999033203125],
            [7761.7128125, 4856.561796875, 2.99904296875],
            [7734.0325, 4902.186484375, 3.0302636718750002],
            [7726.4359375, 4919.35046875, 2.9990136718750002],
            [7713.85578125, 4946.79609375, 2.9990234375],
            [7682.6479687500005, 5010.32859375, 2.9990136718750002],
            [7661.7609375, 5052.3707421875, 2.998984375],
            [7636.68078125, 5093.396953125, 2.99900390625],
            [7583.282812500001, 5162.2361328125, 2.99900390625]
          ],
          blackred: [
            [7583.282812500001, 5162.2361328125, 2.99900390625],
            [7533.4800000000005, 5136.7114843750005, 2.99900390625],
            [7439.146875, 5085.0171484375005, 2.9990625],
            [7340.69109375, 5031.022265625, 2.99904296875],
            [7265.88390625, 5130.68859375, 2.9990234375],
            [7207.388281250001, 5220.4976171875005, 2.99908203125],
            [7080.0025000000005, 5061.764921875, 2.9990234375],
            [6958.6284375000005, 4907.41703125, 2.9991015625]
          ]
        }

        const options = {
          green: {
            color: [0, 194 / 255, 42 / 255], //折线颜色
            flowRate: 0.8 //流速
          },
          yellow: {
            color: [250 / 255, 251 / 255, 102 / 255], //折线颜色
            flowRate: 0.5 //流速
          },
          red: {
            color: [255 / 255, 72 / 255, 47 / 255], //折线颜色
            flowRate: 0.25 //流速
          },
          blackred: {
            color: [234 / 255, 41 / 255, 46 / 255], //折线颜色
            flowRate: 0.1 //流速
          }
        }

        const polylineList = []

        for (let key in coordinatesObj) {
          const coordinates = coordinatesObj[key]
          const p1 = {
            id: 'p1_' + key, //折线唯一标识id
            coordinates: coordinates, //构成折线的坐标点数组
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: [...options[key].color, 0.4], //折线颜色
            thickness: 10, //折线宽度
            intensity: 1, //亮度
            flowRate: options[key].flowRate, //流速
            shape: 1, //折线类型 0：直线， 1：曲线
            depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
            style: 4, //折线样式 参考样式枚举：PolylineStyle
            tiling: 1 //材质贴图平铺比例
          }
          const p2 = {
            id: 'p2_' + key, //折线唯一标识id
            coordinates: coordinates, //构成折线的坐标点数组
            coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
            range: [1, 10000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
            color: [...options[key].color, 1], //折线颜色
            thickness: 8, //折线宽度
            intensity: 5, //亮度
            flowRate: options[key].flowRate, //流速
            shape: 1, //折线类型 0：直线， 1：曲线
            depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
            style: 3, //折线样式 参考样式枚举：PolylineStyle
            tiling: 0.5 //材质贴图平铺比例
          }
          polylineList.push(p1)
          polylineList.push(p2)
        }

        // 添加dts marker
        fdapi.polyline.add(polylineList)

        fdapi.camera.set(8220.202734, 4595.58377, 970.805, -57.660343, -147.410843, 2)
      }

      const clearLayer = () => {
        fdapi.polyline.clear()
      }
      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset(2 | 4)
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      // 页面加载调用
      window.addEventListener('load', OnLoad, true)

      // 页面窗口变换调用
      window.addEventListener('resize', onResize, true)
    </script>
  </body>
</html>
